<template>
    <div style="width:1200px;">
        <div ref="chartRef" sytle="width:600px;height:400px">

        </div>
        <div>
            我的预约   <el-button link type="primary" @click="toBookingRoom">去预约</el-button>
        </div>
        <div>
            <el-card style="max-width: 280px;float: left;margin-left:10px;" v-for="item in mybookings">
                <template #header>
                <div class="card-header">
                    <span>会议室名称:{{ item.roomName }}</span>
                </div>
                </template>
                会议室地址：{{ item.roomAddr }} <br/>
                开始时间：{{ item.startTime }} <br/>
                结束时间：{{ item.endTime }}  <br/>
                会议室状态：<span v-if="item.state==1">已预约</span>
                            <span v-else-if="item.state==2">确定预约</span>
                            <span v-else-if="item.state==3">取消预约</span>

                <template #footer>
                    <el-button type="primary" @click="updateState(item,2)">确定预约</el-button>
                    <el-button type="danger" @click="updateState(item,3)">取消预约</el-button>
                </template>
            </el-card>
        </div>
    </div>
    
</template>
<script>
    import booking from '../../api/booking'
import Booking from '../../api/booking'
import * as echarts from 'echarts'

    export default{
        data(){
            return{
                mybookings:[]
            }
        },
        mounted(){
            this.showEcharts()
            this.getMyBookings()
        },
        methods:{
            showEcharts(){
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(this.$refs.chartRef);
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: 'ECharts 入门示例'
                    },
                    tooltip: {},
                    xAxis: {
                        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                    },
                    yAxis: {},
                    series: [
                        {
                        name: '销量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20]
                        }
                    ]
                    });
                
            },
            getMyBookings(){
                const id = localStorage.getItem('userId')
                Booking.mybookings(id).then(r=>{
                    this.mybookings = r.data
                })
            },
            toBookingRoom(){
                this.$router.push({name:'bookingroom'})
            },
            updateState(row,state){
                if(row.state==2&& state==3){
                    alert("该会议室已确定预约，无法取消")
                    return
                }
                if(row.state==3&& state==2){
                    alert("该会议室已取消，请重新预约")
                    return
                }
                const data = {"id":row.id,"state":state}
                booking.updateState(data).then(r=>{
                    if(r.code==1){
                        this.getMyBookings()
                    }else{
                        alert("操作失败")
                    }
                })
            }
        }
    }

</script>
<style scoped>

</style>